<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
	let gMenu = new facecat.FCMenu();
	
    /*
    * 点击方法
    * view:视图
    * firstTouch:是否第一次触摸
    * firstPoint:第一次触摸的坐标
    * secondTouch:是否第二次触摸
    * secondPoint:第二次触摸的坐标
    * clicks:点击次数
    */
    gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
		if (view.viewType == "menuitem") {
			console.log(view.text + "=" + view.value);
		}
	};

	/*
	* 鼠标按下实现方法
	* view:视图
	* mp:坐标
	* button:按钮
	* clicks:点击次数
	* delta:滚轮值
	*/
	gPaint.onMouseDown = function (view, mp, buttons, clicks, delta) {
		facecat.onMouseDownDefault (view, mp, buttons, clicks, delta);
		if (buttons == 2) {
			gMenu.location = view.paint.touchDownPoint;
			gMenu.visible = true;
			facecat.adjustMenu(gMenu);
			facecat.invalidate(gMenu.paint);
		}
	};

	/*
	* 触摸开始方法
	* view:视图
	* firstTouch:是否第一次触摸
	* firstPoint:第一次触摸的坐标
	* secondTouch:是否第二次触摸
	* secondPoint:第二次触摸的坐标
	*/
	gPaint.onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
		facecat.onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
		if(!gMenu.visible){
			gMenu.location = view.paint.touchDownPoint;
			gMenu.visible = true;
			facecat.adjustMenu(gMenu);
			facecat.invalidate(gMenu.paint);
		}
	};

	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				if(document){
					canvas = document.querySelector('#myCanvas');
					gPaint.isMobile = facecat.isMobileMode();
					facecat.addDefaultEvent(canvas, gPaint);
				}else{
					canvas = uni.createSelectorQuery('#myCanvas');
					gPaint.isMobile = true;
				}
				//注册事件
				uni.getSystemInfo({ 
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
					try {
						this.widthEle = res.size.windowWidth;
						this.heightEle = res.size.windowHeight;
						let canvas = null;
						if(document){
							canvas = document.querySelector('#myCanvas');
						}else{
							canvas = uni.createSelectorQuery('#myCanvas');
						}
						canvas.width = this.widthEle;
						canvas.height = this.heightEle;
						facecat.updateViewDefault(gPaint.views);
					} catch (err) {
					}
					facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill">
					</div>
				  </body>
				</html>
				`;
				if(document){
					facecat.renderFaceCat(gPaint, xml);
				}else{
					canvas.id = "myCanvas";
					facecat_uni.renderFaceCatUni(gPaint, xml);
				}
				gMenu.size = new facecat.FCSize(100, 300);
				facecat.addView(gMenu, gPaint);
				for (let i = 0; i < 10; i++) {
					let menuItem = new facecat.FCMenuItem();
					menuItem.text = "菜单项" + (i + 1);
					menuItem.value = i + 1;
					facecat.addMenuItem(menuItem, gMenu);
					for (let j = 0; j < 10; j++) {
						let subMenuItem = new facecat.FCMenuItem();
						subMenuItem.text = "子菜单项" + (j + 1);
						subMenuItem.value = j + 1;
						facecat.addMenuItemToParent(subMenuItem, menuItem);
						for (let z = 0; z < 10; z++) {
							let sunMenuItem = new facecat.FCMenuItem();
							sunMenuItem.text = "孙菜单项" + (z + 1);
							sunMenuItem.value = z + 1;
							facecat.addMenuItemToParent(sunMenuItem, subMenuItem);
						}
					}
				}
		},
		methods: {
			touchStartCanvas: function (e) {
				facecat_uni.handleTouchStart(gPaint, e, null);
			},touchMoveCanvas: function (e) {
				facecat_uni.handleTouchMove(gPaint, e, null);
			},touchEndCanvas: function (e) {
				facecat_uni.handleTouchEnd(gPaint, e, null, null);
			}
		}
	}
</script>

<style>
</style>
